<template>
  <div class="footer-box">
    <router-link :to="{name:'home'}">
        <i :class="{active : $route.path == '/'}" class="el-icon-s-home"></i>
    </router-link>
    <router-link :to="{name:'classify'}">
        <i :class="{active : $route.path == '/classify'}" class="el-icon-menu"></i>
    </router-link>
    <router-link :to="{name:'cart'}">
        <i :class="{active : $route.path == '/cart'}" class="el-icon-shopping-cart-2"></i>
    </router-link>
    <router-link :to="{name:'login'}">
        <i :class="{active : $route.path == '/login'}" class="el-icon-s-custom"></i>
    </router-link>
  </div>
</template>

<script>
export default {
}
</script>

<style scoped>
.footer-box{
    width: 100%;
    height:13.333vw;
    background-color: #fff;
    display: flex;
}
.footer-box a{
    width: 25%;
    height: 100%;
    display: inline-block;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}
i{
    color : rgba(0,0,0,0.5);
    font-size: 30px;
}
.active{
    color: #F53F3F;
}
</style>